import React, { useState, useEffect } from 'react'
import { Card } from '&/appComponents/Antd'
import Echarts from '&/baseUI/EChartsUI'
import './index.scss'
const Area = ({ countyData }) => {
  const [option1, setOption1] = useState()
  const [option, setOption] = useState()
  useEffect(() => {
    if (!countyData) return
    const { yAxis, xAxis, sum, origin } = countyData
    const option1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '1%',
        right: '4%',
        bottom: '0%',
        top: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: yAxis,
        // inverse: true,
        splitLine: {
          show: false
        },
        axisLabel: { interval: 0, rotate: -20 }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          // name: '2011',
          type: 'bar',
          data: xAxis,
          itemStyle: {
            normal: {
              color: '#89c0ff' // 设置柱子的颜色为红色
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
          // label: {
          //   show: true, // 开启显示
          //   // rotate: 360, // 旋转70度
          //   // position: 'right', // 在上方显示
          //   // distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
          //   // verticalAlign: 'middle',
          //   textStyle: {
          //     // 数值样式
          //     color: 'black',
          //     fontSize: 12
          //   }
          // }
        }
      ]
    }
    setOption1(option1)
    const option = {
      tooltip: {
        // trigger: 'item',
        // formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      graphic: {
        type: 'text',
        left: 'center',
        top: '48%',
        style: {
          text: `总计 ${sum}`,
          textAlign: 'center',
          fill: '#333',
          fontSize: 17
        }
      },
      series: [
        {
          // name: 'Area Mode',
          type: 'pie',
          radius: [80, 140],
          // roseType: 'area',
          itemStyle: {
            borderRadius: 2
          },
          data: origin
            .filter((o) => o.count)
            .map((item) => ({ name: item.name, value: item.count }))
        }
      ]
    }
    setOption(option)
  }, [countyData])

  const handText = () => {
    return (
      <span>
        各区应急报警总数&emsp;&emsp;
        {/* <span style={{ fontSize: '14px' }}>总计：{countyData.sum}</span> */}
      </span>
    )
  }
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flex: 1 }}>
      <Card
        size="small"
        title={handText()}
        style={{ flex: 1 }}
        bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <div className="AlarmStatistics-area">
          <div className="area-left">
            <Echarts option={option1} width="100%" />
          </div>
          <div className="area-right">
            <Echarts option={option} width="100%" />
          </div>
        </div>
      </Card>
    </div>
  )
}
export default Area
